<template>
    <div>
      <el-cascader
        v-model="state"
        class="width_100"
        :options="arrdessOptions"
        :props="{ value: 'code', label: 'name' }"
        @change="handleChange"
      />
    </div>
  </template>
  
<script setup lang="ts">
/**
 * @import
 */
import { ArrayFlat } from '~/src/utils/utils'

/**
 * @prop
 */
const props = defineProps({
    // tree数据
    options: {
        type: Array,
        default: [],
    } as any,
    // 值
    value: {
        type: Array,
        default: [],
    } as any,
    // 默认值
    defaultValue: {
        type: Array,
        default: [],
    } as any,
})

/**
 * @var
 */
const state: any = toRef<any>([])
const arrdessOptions = toRef<any>(props.options)
/**
 * @method
 */

const emit = defineEmits(['vabAddressChange'])

//当绑定值变化时触发的事件
const handleChange = (code: any) => {
    // 例如 code [10001,1002,1003]

    const addressName: any = []

    // 降维
    const array = ArrayFlat(arrdessOptions.value)
    // 通过编码查找对象名称
    for (let index = 0; index < array.length; index++) {
        const element = array[index]
        if (element.code == code[0]) addressName[0] = element.name
        if (element.code == code[1]) addressName[1] = element.name
        if (element.code == code[2]) addressName[2] = element.name
    }

    emit('vabAddressChange', addressName)
}

/**
 * @周期
 */
watch(
    () => props.defaultValue,
    (newValue, oldValue) => {
        state.value = newValue
    },
    { deep: true, immediate: true }
)

watch(
    () => props.options,
    (newValue, oldValue) => {
        arrdessOptions.value = newValue
    },
    { deep: true }
)
</script>
  
<style scoped></style>
  